<?php 
header("content-type:text/html;charset=utf8");
$pdo = new PDO("mysql:host=127.0.0.1;dbname=statistics","root","zqVnUy6cxsQXbpEZ");
$pdo->exec("set names utf8");
if (isset($_GET['start']) && $_GET['start']) {
    $start = strtotime($_GET['start']);
}
if (isset($_GET['end']) && $_GET['end']) {
    $end = strtotime($_GET['end']);
}
$device_sql = "SELECT * FROM statistics_device_use_duration WHERE 1 = 1";
if (isset($start)) {
    $device_sql .= " AND time >= '$start'";
    $start = date("Y-m-d",$start);
}
if (isset($end)) {
    $device_sql .= " AND time <= '$end'";
    $end = date("Y-m-d",$end);
}
$device_data = $pdo->query($device_sql)->fetchAll(PDO::FETCH_ASSOC);
$arr = array('0~1'=>'0','1~2'=>'0','2~3'=>'0','3~4'=>'0','4~5'=>'0','5~6'=>'0','6~7'=>'0','7~8'=>'0','8~9'=>'0','9~10'=>'0','10~11'=>'0','11~12'=>'0','12~13'=>'0','13~14'=>'0','14~15'=>'0','15~16'=>'0','16~17'=>'0','17~18'=>'0','18~19'=>'0','19~20'=>'0','20~21'=>'0','21~22'=>'0','22~23'=>'0','23~24'=>'0');
foreach ($device_data as $key => $value) {
    if ($value['use_duration']/60<=1) {
        $arr["0~1"] += 1;       
    }elseif($value['use_duration']/60>1 && $value['use_duration']/60<=2){
        $arr['1~2'] += 1;
    }elseif($value['use_duration']/60>2 && $value['use_duration']/60<=3){
        $arr['2~3'] += 1;
    }elseif($value['use_duration']/60>3 && $value['use_duration']/60<=4){
        $arr['3~4'] += 1;
    }elseif($value['use_duration']/60>4 && $value['use_duration']/60<=5){
        $arr['4~5'] += 1;
    }elseif($value['use_duration']/60>5 && $value['use_duration']/60<=6){
        $arr['5~6'] += 1;
    }elseif($value['use_duration']/60>6 && $value['use_duration']/60<=7){
        $arr['6~7'] += 1;
    }elseif($value['use_duration']/60>7 && $value['use_duration']/60<=8){
        $arr['7~8'] += 1;
    }elseif($value['use_duration']/60>8 && $value['use_duration']/60<=9){
        $arr['8~9'] += 1;
    }elseif($value['use_duration']/60>9 && $value['use_duration']/60<=10){
        $arr['9~10'] += 1;
    }elseif($value['use_duration']/60>10 && $value['use_duration']/60<=11){
        $arr['10~11'] += 1;
    }elseif($value['use_duration']/60>11 && $value['use_duration']/60<=12){
        $arr['11~12'] += 1;
    }elseif($value['use_duration']/60>12 && $value['use_duration']/60<=13){
        $arr['12~13'] += 1;
    }elseif($value['use_duration']/60>13 && $value['use_duration']/60<=14){
        $arr['13~14'] += 1;
    }elseif($value['use_duration']/60>14 && $value['use_duration']/60<=15){
        $arr['14~15'] += 1;
    }elseif($value['use_duration']/60>15 && $value['use_duration']/60<=16){
        $arr['15~16'] += 1;
    }elseif($value['use_duration']/60>16 && $value['use_duration']/60<=17){
        $arr['16~17'] += 1;
    }elseif($value['use_duration']/60>17 && $value['use_duration']/60<=18){
        $arr['17~18'] += 1;
    }elseif($value['use_duration']/60>18 && $value['use_duration']/60<=19){
        $arr['18~19'] += 1;
    }elseif($value['use_duration']/60>19 && $value['use_duration']/60<=20){
        $arr['19~20'] += 1;
    }elseif($value['use_duration']/60>20 && $value['use_duration']/60<=21){
        $arr['20~21'] += 1;
    }elseif($value['use_duration']/60>21 && $value['use_duration']/60<=22){
        $arr['21~22'] += 1;
    }elseif($value['use_duration']/60>22 && $value['use_duration']/60<=23){
        $arr['22~23'] += 1;
    }elseif($value['use_duration']/60>23 && $value['use_duration']/60<=24){
        $arr['23~24'] += 1;
    }   
}
$time = array();
$number = array();
foreach ($arr as $key => $value) {
    // if ($value) {
        $time[] = $key;
        $number[] = $value;
    // }
}
$time = json_encode($time);
$number = json_encode($number);
 ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>设备使用时长统计</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href=""><span>数据统计</span>嗨镜</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 退出登陆</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div><!-- /.container-fluid -->
	</nav>
		
	<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
		<ul class="nav menu">
			<li><a href="index.php"><span class="glyphicon glyphicon-dashboard"></span> 设备日活统计</a></li>
            <li><a href="application_index.php"><span class="glyphicon glyphicon-dashboard"></span> 应用日活统计</a></li>
            <li class="active"><a href="device_use_duration.php"><span class="glyphicon glyphicon-th"></span> 设备使用时长统计</a></li>
            <li><a href="application_use_duration.php"><span class="glyphicon glyphicon-th"></span> 应用使用时长统计</a></li>
            <li><a href="device_info.php"><span class="glyphicon glyphicon-stats"></span> 设备信息统计</a></li>
            <li><a href="user_info.php"><span class="glyphicon glyphicon-list-alt"></span> 用户信息统计</a></li>
            <li><a href="application_info.php"><span class="glyphicon glyphicon-pencil"></span> 应用信息统计</a></li>
            <li><a href="device_time_interval.php"><span class="glyphicon glyphicon-info-sign"></span> 设备日均时段统计</a></li>
            <li><a href="application_time_interval.php"><span class="glyphicon glyphicon-info-sign"></span> 应用日均时段统计</a></li>
		</ul>
		<div class="attribution">More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></div>
	</div><!--/.sidebar-->
		
	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">	
         <form action="./device_use_duration.php">
            <div class="form-group" border="1">
                <b>开始日期：</b><input name="start" id="start" value="<?php echo isset($start)?$start:'' ?>" type="text" style="width:120px;margin-top:30px;border:2;border-color:green;" placeholder="开始日期">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b>结束日期：</b><input name="end" id="end" value="<?php echo isset($end)?$end:'' ?>" type="text" style="width:120px;margin-top:30px;border:2;border-color:green;" placeholder="结束日期">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" style="width:120px;border:2;border-color:yellow;background-color:yellow;" value="搜索">
            </div>
        </form> 		
		<div id="line1" style="width:100%;height:400px;"></div>
	</div>	<!--/.main-->

	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/chart.min.js"></script>
	<script src="js/chart-data.js"></script>
	<script src="js/easypiechart.js"></script>
	<script src="js/easypiechart-data.js"></script>
	<script type="text/javascript" src="./js/echarts.min.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
	<script>
$(document).ready(function(){
    var time = <?php echo $time ?>;
    var number = <?php echo $number ?>;
    // 折线图
    var line1 = echarts.init(document.getElementById('line1'));
    line1.setOption({
        color:["#32d2c9"],
        title: {
            x: 'left',
            text: '设备使用时长统计',
            textStyle: {
                fontSize: '18',
                color: '#4c4c4c',
                fontWeight: 'bolder'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data:time,
            axisLabel: {
                interval:0
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'人数',
                type:'line',
                data:number,
                markLine: {data: [{type: 'average', name: '平均值'}]}
            }
        ]
    }) ;
}) 


	</script>	
</body>

</html>
